<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的订单</title>
    <link href="${applicationScope.basePath}/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/index.css">
    <link rel="stylesheet" href="${applicationScope.basePath}/css/comments.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/model.css">
    <link rel="stylesheet" type="text/css" href="${applicationScope.basePath}/css/userhome.css">
    <script src="${applicationScope.basePath}/js/jquery-3.4.1.min.js"></script>
    <script src="${applicationScope.basePath}/js/bootstrap.min.js"></script>
</head>
<body>
<jsp:include page="../header.jsp" flush="true"/>
<div class="container" style="margin-top: 80px;">
    <!--
        描述：左侧个人中心栏
    -->
    <div class="row">
        <div class="col-md-2">
            <div class="row">
                <div class="col-md-12">
                    <div class="thumbnail">
                        <img src="${applicationScope.basePath}/images/header.jpg" alt="" class=""
                             style="border-radius: 50%;width: 140px;height: 140px;">
                        <div class="caption">
                            <h3 style="text-align: center;">${requestScope.user.userName}</h3>
                        </div>
                        <hr>
                        <a id="myWallet" class="btn btn btn-warning btn-block"
                           href="${applicationScope.basePath}/user/space/purse"
                           target="iframePage">我的钱包：${requestScope.purse.balance}元</a>
                        <span disabled="true" class="btn btn-warning btn-block" data-toggle="modal"
                              data-target="#myModal"
                              style="margin-top: 15px;">我的信用积分：${requestScope.user.power}</span>
                    </div>
                </div>
            </div>
            <div class="list-group ">
                <a id="orders" href="${applicationScope.basePath}/user/space/orders"
                   class="list-group-item list-group-item-info ">订单中心</a>
                <a id="notice_list" href="${applicationScope.basePath}/user/space"
                   class="list-group-item list-group-item-info">求购中心<span
                        class="badge">${requestScope.num}</span></a>
                <a id="system_msg" href="${applicationScope.basePath}/user/space/sys"
                   class="list-group-item list-group-item-info">系统信息<span
                        class="badge">${requestScope.sys}</span></a>
                <a id="goods_list" href="${applicationScope.basePath}/user/space/goods"
                   class="list-group-item list-group-item-info">我的商品</a>
                <a id="person_msg" href="${applicationScope.basePath}/user/space/msg"
                   class="list-group-item list-group-item-info">个人设置</a>
            </div>
        </div>
        <!--
            描述：右侧个人内容栏
        -->
        <div class="col-md-10">
            <h4>订单中心</h4>
            <hr/>
            <div id="content1">
                <ul class="nav nav-tabs" role="tablist" style="width: 98%">
                    <li class="nav-item active"><a class="nav-link active" data-toggle="tab"
                                                   href="#orders_my">我买的</a></li>
                    <li class="nav-item"><a class="nav-link" data-toggle="tab"
                                            href="#orders_other">我卖的</a></li>
                </ul>
                <div class="tab-content" style="width: 100%">
                    <!-- 买家订单中心 -->
                    <div id="orders_my" class="container tab-pane active"
                         style="width: 100%;height: 100%;">
                        <br>
                        <form class="form-horizontal" role="form">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr></tr>
                                    <tr>
                                        <th>编号</th>
                                        <th>时间</th>
                                        <th>名称</th>
                                        <th>价格</th>
                                        <th>备注</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${requestScope.myOrdersList}" var="item" varStatus="vs">
                                        <tr>
                                            <td style="width: 10%;">${item.order_num}</td>
                                            <td style="width: 15%;font-size: 14px;">${item.order_date}</td>
                                            <td style="width: 10%;font-size: 14px;"><a style="color: #9dc4ff;"
                                                                                       title="点击查看详情"
                                                                                       href="${applicationScope.basePath}/goods/detail/${item.goods.id}">${item.goods.name}</a>
                                            </td>
                                            <td style="width: 10%;font-size: 14px;">￥${item.order_price}</td>
                                            <td style="width: 25%;font-size: 14px;">${item.order_note}</td>
                                            <c:if test="${item.order_state == 1}">
                                                <td style="width: 10%;color: red;">待发货</td>
                                            </c:if>
                                            <c:if test="${item.order_state == 2}">
                                                <td style="width: 10%;color: #45ffd8;">待收货</td>
                                            </c:if>
                                            <c:if test="${item.order_state == 3}">
                                                <td style="width: 10%;color: #b6b4b9;">已完成</td>
                                            </c:if>
                                            <td>
                                                <c:if test="${item.order_state == 3}">
                                                    <a href="#" onclick="return deleteOrder(this,${item.id});"
                                                       type="button" class="btn btn-danger">删除</a>
                                                </c:if>
                                                <c:if test="${item.order_state == 2}">
                                                    <a href="#" onclick="return yes(this,${item.id});" type="button"
                                                       class="btn btn-warning">确认收货</a>
                                                </c:if>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                    <!-- 卖家订单中心 -->
                    <div id="orders_other" class="container tab-pane fade"
                         style="width: 100%">
                        <br>
                        <form class="form-horizontal" role="form">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                    <tr></tr>
                                    <tr class="text-center">
                                        <th>编号</th>
                                        <th>名称</th>
                                        <th>价格</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${requestScope.userOrdersList}" var="item" varStatus="vs">
                                        <tr>
                                            <td style="width: 10%;font-size: 14px;">${vs.count}</td>
                                            <td style="width: 20%;font-size: 14px;"><a style="color: #9dc4ff;"
                                                                                       title="点击查看详情"
                                                                                       href="${applicationScope.basePath}/goods/detail/${item.goods.id}">${item.goods.name}</a>
                                            </td>
                                            <td style="width: 20%;font-size: 14px;">￥${item.order_price}</td>
                                            <td style="width: 30%;font-size: 14px;">${item.order_note}</td>
                                            <td style="width: 20%;">
                                                <c:if test="${item.order_state == 1}">
                                                    <a onclick="return push(this,${item.id},${item.user_id});" type="button" href="#" class="btn btn-info">发货</a>
                                                </c:if>
                                                <c:if test="${item.order_state == 2}">
                                                    <a type="button" class="btn btn-default disabled">等待对方收货</a>
                                                </c:if>
                                                <c:if test="${item.order_state == 3}">
                                                    <a type="button" href="#" onclick="return deleteOrder(this,${item.id},${item.user_id});" class="btn btn-danger">订单完成，确认删除</a>
                                                </c:if>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    /*确认删除*/
    function deleteOrder(obj, id,_id) {
        let data = '{"id":' + id + ',"user_id":'+ _id +'}';
        if (confirm("确认删除？")) {
            $.ajax({
                url: "${applicationScope.basePath}/user/ordersDel",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success: function (data) {
                    if (!data.flag) {
                        alert("删除失败！");
                    } else {
                        let objP = $(obj).parent().parent();
                        let objPP = $(objP).parent();
                        $(objP).remove();
                        let arr = $(objPP).children('tr');
                        for (let i = 0; i < arr.length; i++) {
                            $(arr[i]).children("td:first-child").text(i + 1);
                        }
                    }
                },
                error: function () {

                }
            });
        }
        return false;
    }

    /*确认收货*/
    function yes(obj, id) {
        let data = '{"id":' + id + '}';
        if (confirm("确认收货？")) {
            $.ajax({
                url: "${applicationScope.basePath}/user/ordersYes",
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: data,
                success: function (data) {
                    if (!data.flag) {
                        alert("请稍后重试");
                    } else {
                        let objP = $(obj).parent();
                        $(objP).empty();
                        $(objP).append('<a href="#" \n' + 'type="button" class="btn btn-danger">删除</a>');
                        let t = $(objP).children("a:first-child");
                        $(objP).on("click", 'a', function () {
                            deleteOrder(t, id);
                        });
                        $(objP).prev().css("color", "#b6b4b9");
                        $(objP).prev().text("已完成");
                    }
                },
                error: function () {

                }
            });
        }
        return false;
    }

    /*发货*/
    function push(obj,id,_id) {
        let data = '{"id":' + id + ',"user_id":'+ _id +'}';
        $.ajax({
            url: "${applicationScope.basePath}/user/ordersPush",
            type: "POST",
            dataType: "json",
            contentType: "application/json;charset=UTF-8",
            data: data,
            success: function (data) {
                if (!data.flag) {
                    alert("请稍后重试");
                } else {
                    let objP = $(obj).parent();
                    $(objP).empty();
                    $(objP).append('  <a type="button" class="btn btn-default disabled">等待对方收货</a>');
                }
            },
            error: function () {

            }
        });
        return false;
    }

</script>
</html>
